<template>
  <section>
    <search-bar>
      <el-row>
        <el-col :span="8">
          <label style="float: left; width:70px">使用状态</label>
          <el-select v-model="use_issueVal" placeholder="请选择">
            <el-option
              v-for="item in use_issue"
              :label="item.use_issue_lable"
              :key="item.use_issue_value"
              :value="item.use_issue_value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <label style="float: left; width:70px">领取时间</label>
          <el-date-picker v-model="chose_dateRange_start" type="date" prop="effectiveEndDate" placeholder="选择开始日期">
          </el-date-picker>
          <el-date-picker v-model="chose_dateRange_end" type="date" prop="effectiveEndDate" placeholder="选择结束日期">
          </el-date-picker>
        </el-col>
        <el-col :span="8">

        </el-col>
      </el-row>
    </search-bar>

    <!-- 操作 -->
    <el-col :span="24" style="margin-bottom: 10px">
      <el-button type="primary" @click="deriveList">导出</el-button>
      <el-button type="primary" @click="resetCondition" style="float: right">重置</el-button>
      <el-button type="primary" v-on:click="getTableData" style="float: right">查询</el-button>
    </el-col>
    <!--列表-->
    <el-table :data="tableData" highlight-current-row border @sort-change="sortChange"
              @selection-change="selsChange" v-loading="listLoading" style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="id" label="序号" width="150">
      </el-table-column>
      <el-table-column prop="phone" label="领取账号" width="180">
      </el-table-column>
      <el-table-column prop="phone" label="领取时间" width="180">
      </el-table-column>
      <el-table-column prop="status" label="使用状态" width="180">
      </el-table-column>
      <el-table-column prop="useTime" label="使用时间" width="200">
      </el-table-column>
      <el-table-column prop="orderNumber" label="订单编号" width="247">
      </el-table-column>
      <el-table-column prop="orderAmount" label="订单金额（元）" width="220">
      </el-table-column>
      <el-table-column prop="discountAmount" label="优惠后订单金额（元）" width="220">
      </el-table-column>

    </el-table>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev, pager, next, jumper"
        :total="total" style="float: right">
      </el-pagination>
    </el-col>
    <!-- 弹窗 -->

  </section>
</template>

<script>
import { getReceive } from '../../api/marketing/receiveApi.js';

export default {
  data () {
    return {
      // 领取时间
      chose_dateRange_start: {},
      chose_dateRange_end: {},
      // 使用状态
      use_issue: [
        {
          use_issue_value: 'issue_no',
          use_issue_lable: '未发布'
        }, {
          use_issue_value: 'issue_yes',
          use_issue_lable: '已发布'
        },
        {
          use_issue_value: 'issue_over',
          use_issue_lable: '已结束'
        }
      ],
      use_issueVal: '',
      sels: [],
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      sortProp: null,
      sortOrder: 'ascending',
      listLoading: false,
      myFormVisible: false,
      submitLoading: false,
      // 表单数据
      myForm: {
        'id': null,
        'password': null,
        'alias': null,
        'email': null,
        'name': null,
        'phone': null,
        'sex': null,
        'status': null,
        'type': null,
        'birthday': null
      }

    };
  },
  methods: {
    // 导出
    deriveList () {},
    // 多选操作
    selsChange (sels) {
      this.sels = sels;
    },
    // 排序操作
    sortChange (o) {
      this.sortProp = o.prop;
      this.sortOrder = o.order;
      this.getTableData();
    },
    // 每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.getTableData();
    },
    // 第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.getTableData();
    },
    // 重置查询条件
    resetCondition () {
      for (let p in this.condition) {
        this.condition[p] = null;
      }
    },
    // 获取表格数据
    getTableData () {
      let str = [];
      for (let p in this.condition) {
        if (this.condition[p] !== '' && this.condition[p] !== null) {
          str.push(p + '=' + this.condition[p]);
        }
      }
      this.listLoading = true;
      getReceive({
        page: this.currentPage,
        size: this.pageSize,
        filters: str.join(';'),
        sorts: (this.sortProp === null ? '' : (this.sortOrder === 'ascending' ? '-' : '+') + this.sortProp)
      }).then((res) => {
        this.tableData = res.data.detailModelList;
        this.currentPage = res.data.currPage;
        this.total = res.data.totalCount;
        this.pageSize = res.data.pageSize;
        this.listLoading = false;
      });
    }
  },
  // 初始化数据
  mounted () {
    this.getTableData();
  }
};
</script>

<style lang="less">

</style>
